<div class="vis-option-type-group {open?'group-open':''} {notoggle?'notoggle':''}">
    <label class="group-title" on:click="toggle()">
        {#if !notoggle}
        <i class="fa fa-chevron-up expand-group pull-right"></i>
        <i class="fa fa-chevron-down collapse-group pull-right"></i>
        {/if} {@html label }</label
    >

    {#if open}
    <div class="option-group-content vis-option-type-chart-description">
        <slot></slot>
    </div>
    {/if}
</div>

<style lang="less">
    .vis-option-type-group {
        margin-bottom: 30px !important;
    }
    .vis-option-type-group.notoggle {
        .group-title {
            font-size: 18px;
            font-weight: 400 !important;
            border-top: 0 !important;
            padding-left: 0 !important;
        }
    }
    .vis-option-type-group.group-open label.group-title {
        margin-bottom: 5px !important;
    }
</style>

<script>
    export default {
        data() {
            return {
                notoggle: false,
                id: false,
                open: true
            };
        },
        methods: {
            toggle() {
                if (this.get().notoggle) return;
                const { open, id } = this.get();
                if (id) {
                    const visGroups = JSON.parse(window.localStorage.getItem('dw-vis-groups')) || {};
                    if (!visGroups['locator-map']) visGroups['locator-map'] = {};
                    visGroups['locator-map'][id] = visGroups['locator-map'][id] === 'open' ? 'closed' : 'open';
                    window.localStorage.setItem('dw-vis-groups', JSON.stringify(visGroups));
                }
                this.set({ open: !open });
            }
        },
        oncreate() {
            const { id, notoggle } = this.get() || {};
            if (notoggle) return;
            if (id) {
                const visGroups = JSON.parse(window.localStorage.getItem('dw-vis-groups')) || {};
                if (visGroups['locator-map'] && visGroups['locator-map'][id]) {
                    this.set({ open: visGroups['locator-map'][id] !== 'closed' });
                }
            }
        }
    };
</script>
